<template>
  <div class="product-manager-warp disabled-warp" style="height: calc(100vh - 104px); padding: 20px; ">
    <div class="dashboard-container"
         style=" padding: 20px 25px 10px;  ">
      <div
          style="line-height: 16px; flex-wrap: wrap;   align-items: center;  font-size: 16px; font-family: Source Han Sans CN;font-weight: bold;color: #2F3745; ">
        <div class="dashboard-inner">
          商品管理
          <el-tooltip class="item" effect="dark" content="温馨提示：对应列可以通过拖动改变表格宽度" placement="top">
            <i style="position: relative; left: 6px; top: 2px;" class="header-icon el-icon-info"></i>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div style="display: flex; height: calc(100% - 30px);">
      <div class="left-content" style="color: #2F3745; ">
        <tree-expansion ref="treeExpansionRef" @getCurrentNodeKey="getCurrentNodeKey" @statusChange="statusChange"/>
      </div>

      <div class="right-content" style="background: #fff; " :style="`${expansionStatus? 'width: calc(100% - 260px);' : 'width: 100%;'};
            ${expansionStatus ? 'margin-left: 10px;' : 'margin-left: 0;'} `">
        <div :style="`margin-left: 12px; margin-right: 12px; height: 100%; width: calc(100% - 24px);`">
          <common-operation-form :list="list"/>
          <el-table style="margin-top: 15px; " fit :height="windowHeight - 10"
                    @select="changeevent" ref="tableRef"
                    v-loading="table.loading" :data="table.data" border >
            <template v-for="(item, index) in table.header1">
              <el-table-column :prop="item.prop" :key="index"
                               :width="item.width || 'auto'" :align="`center`"
                               :label="item.label">
                <template slot-scope="scope">
                  <span style=" ">{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>

            <!--            <el-table-column :align="`center`" :key="101" type="selection" :label="'禁用'" width="45"></el-table-column>-->

            <template v-for="(item, index) in table.header2">
              <el-table-column :prop="item.prop" :key="index + 1000"
                               :width="item.width || 'auto'" :align="`center`"
                               :label="item.label">
                <template slot-scope="scope">
                  <span style=" ">{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>

            <el-table-column
                label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-tooltip content="编辑" slot="reference" placement="top">
                    <el-button size="mini" type="primary" icon="el-icon-edit" circle
                               @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" slot="reference" placement="top">
                    <el-button size="mini" @click="del(scope.row)" type="danger" icon="el-icon-delete"
                               circle></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination style="position: relative; text-align: right; margin-top: 10px;"
                         :current-page="page.pageNumber" @size-change="pageChangeEvent"
                         layout="sizes, jumper, prev, pager, next" :page-size="page.pageSize"
                         :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog style="margin-top: 10px;"
               :close-on-click-modal="false"
               width="850px" v-dialog-drag
               title="编辑商品" :modal="false"
               custom-class="dialoginter8" :before-close="() => cancel(false)"
               :visible.sync="editDialog">
      <div style="margin: 10px 25px; ">
        <el-divider style="color: red;" content-position="left">基本信息</el-divider>
        <common-dialog-form  v-if="editDialog" style="padding-bottom: 15px;" ref="commondialogformref1" :col="dialog.col" :list="dialog.form"/>
        <el-divider content-position="left">价格设置</el-divider>
        <common-dialog-form  v-if="editDialog" style="padding-bottom: 15px;" ref="commondialogformref2" :col="dialog.col" :list="dialog.form2"/>
        <el-divider content-position="left">上传图片</el-divider>
        <common-dialog-form  v-if="editDialog" style="padding-bottom: 15px;" ref="commondialogformref3" :col="dialog.col" :list="dialog.form4"/>
        <el-divider content-position="left">库存设置</el-divider>
        <common-dialog-form  v-if="editDialog" style="padding-bottom: 15px;" ref="commondialogformref4" :col="dialog.col" :list="dialog.form3"/>
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancel(false)">关闭</el-button>
          <el-button type="primary" size="small" @click="submit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonOperationForm from "@/components/CommonOperationForm/index.vue";
import CommonDialogForm from "@/components/CommonDialogForm/index.vue";
import TreeExpansion from "@/components/TreeExpansion/ProductManager.vue";
import {addProduct, getProductList, deleteProductByProductID} from "@/api/product";
import {addUnit, getUnitList} from "@/api/unit";
import {getUserInfo} from "@/utils/auth";
import {getWarehouseList} from "@/api/warehouse";
import {deepClone} from "@/utils";

export default {
  name: 'product_manager',
  components: {CommonOperationForm, CommonDialogForm, TreeExpansion},
  data() {
    return {
      list: [
        {
          type: 'input',
          text: '商品名称：',
          width: '75px',
          value: '',
        },
        {
          type: 'input',
          text: '商品编号：',
          width: '75px',
          value: '',
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-search',
          buttonText: '搜索',
          event: () => {
            this.pageNumber = 1;
            this.getProductList();
          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-folder-add',
          buttonText: '增加',
          event: () => {
            this.editDialog = true;
            this.dialog.chooseItem = null;
          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-document-add',
          buttonText: '导入',
          event: () => {

          }
        },
        {
          type: 'button',
          buttonIcon: 'el-icon-takeaway-box',
          buttonText: '导出',
          event: () => {

          }
        },
      ],
      expansionStatus: true,
      treeCurrentNodeKey: '',
      editDialog: false,
      table: {
        data: [],
        loading: false,
        header2: [
          {
            "prop": "unit",
            "label": "单位"
          },
          {
            "prop": "specification",
            "label": "规格型号"
          },
          {
            "prop": "shelfLocation",
            "label": "所在货架"
          },
          // {
          //   "prop": "minStock",
          //   "label": "最低库存"
          // },
          {
            "prop": "inventory",
            "label": "当前库存"
          },
          {
            "prop": "price",
            "label": "进货价"
          },
          {
            "prop": "retailPrice",
            "label": "零售价"
          },
          {
            "prop": "sellingCostPrice",
            "label": "销售成本价",
            "width": "90px",
          },
          {
            "prop": "commission",
            "label": "提成"
          },
          {
            "prop": "nameAbbreviation",
            "label": "名称简码"
          },
          {
            "prop": "manufacturer",
            "label": "生产厂商"
          },
          {
            "prop": "remarks",
            "label": "备注"
          }
        ],
        header1: [
          {
            "prop": "productBarcode",
            "label": "商品条码"
          },
          {
            "prop": "productName",
            "label": "商品名称"
          },
          {
            "prop": "productCategoryLabel",
            "label": "商品类别"
          },
          {
            "prop": "productNumber",
            "label": "商品编号"
          },
        ],
      },
      dialog: {
        col: 3,
        form: [
          [
            {
              text: '分类：',
              required: true,
              field: 'productCategory',
              requiredMessage: "请选择商品分类",
              type: 'selectTree',
              width: '70px',
              node: null,
              value: null,
            },
            {
              text: '商品名称：',
              type: 'input',
              width: '70px',
              field: 'productName',
              requiredMessage: "请输入商品名称",
              required: true,
              value: '',
            },
            {
              text: '零售名称：',
              type: 'input',
              width: '70px',
              field: 'retailName',
              requiredMessage: "请输入零售名称",
              required: false,
              value: '',
            },
          ],
          [
            {
              text: '商品条码：',
              value: '',
              field: 'productBarcode',
              type: 'input'
            },
            {
              text: '商品编号：',
              value: '',
              field: 'productNumber',
              type: 'input'
            },
            {
              text: '规格型号：',
              value: '',
              field: 'specification',
              type: 'input',
            },
          ],
          [
            {
              text: '单位：',
              type: 'unitSelect',
              requiredMessage: "请输入或选择单位",
              required: false,
              field: 'unit',
              width: '70px',
              value: '',
              options: [],
              ref: 'unitRef',
              changeEvent: (v) => {
                console.log(v);
              }
            },
            {
              text: '货位：',
              type: 'input',
              width: '70px',
              value: '',
              field: 'shelfLocation',
            },
            {
              text: '库存预警：',
              value: 20,
              inputWidth: '100%',
              field: 'inventoryWarning',
              keepDecimal: 0,
              width: '70px',
              changeEvent: (v) => {

              },
              type: 'inputnumber',
              placeholder: "20"
            },
          ],
          [
            {
              text: '填写备注：',
              value: '',
              rowWidth: '100%',
              field: 'remarks',
              type: 'textarea',
            },
          ]
        ],
        copyForm: [
          [
            {
              text: '分类：',
              required: true,
              field: 'productCategory',
              requiredMessage: "请选择商品分类",
              type: 'selectTree',
              width: '70px',
              node: null,
              value: null,
            },
            {
              text: '商品名称：',
              type: 'input',
              width: '70px',
              field: 'productName',
              requiredMessage: "请输入商品名称",
              required: true,
              value: '',
            },
            {
              text: '零售名称：',
              type: 'input',
              width: '70px',
              field: 'retailName',
              requiredMessage: "请输入零售名称",
              required: false,
              value: '',
            },
          ],
          [
            {
              text: '商品条码：',
              value: '',
              field: 'productBarcode',
              type: 'input'
            },
            {
              text: '商品编号：',
              value: '',
              field: 'productNumber',
              type: 'input'
            },
            {
              text: '规格型号：',
              value: '',
              field: 'specification',
              type: 'input',
            },
          ],
          [
            {
              text: '单位：',
              type: 'selectAllowCreate',
              requiredMessage: "请输入或选择单位",
              required: false,
              field: 'unit',
              width: '70px',
              value: '',
              options: [],
              ref: 'unitRef',
              changeEvent: (v) => {
                console.log(v);
              }
            },
            {
              text: '货位：',
              type: 'input',
              width: '70px',
              value: '',
              field: 'shelfLocation',
            },
            {
              text: '库存预警：',
              value: 20,
              inputWidth: '100%',
              field: 'inventoryWarning',
              keepDecimal: 0,
              changeEvent: (v) => {

              },
              width: '70px',
              type: 'inputnumber',
              placeholder: "20"
            },
          ],
          [
            {
              text: '填写备注：',
              value: '',
              rowWidth: '100%',
              field: 'remarks',
              type: 'textarea',
            },
            {}
          ]
        ],
        form2: [
          [
            {
              text: '进货价：',
              width: '70px',
              type: 'inputnumber',
              value: undefined,
              inputWidth: '100%',
              field: 'purchasePrice',
              changeEvent: (v) => {

              },
              placeholder: "¥¥"
            },
            {
              text: '批发价：',
              width: '70px',
              type: 'inputnumber',
              value: undefined,
              inputWidth: '100%',
              field: 'wholesalePrice',
              changeEvent: (v) => {

              },
              placeholder: "¥¥"
            },
            {
              text: '零售价：',
              type: 'inputnumber',
              width: '70px',
              inputWidth: '100%',
              field: 'retailPrice',
              changeEvent: (v) => {

              },
              value: undefined,
              placeholder: "¥¥"
            },
          ]
        ],
        copyForm2: [
          [
            {
              text: '进货价：',
              width: '70px',
              type: 'inputnumber',
              value: undefined,
              inputWidth: '100%',
              field: 'purchasePrice',
              changeEvent: (v) => {

              },
              placeholder: "¥¥"
            },
            {
              text: '批发价：',
              width: '70px',
              type: 'inputnumber',
              value: undefined,
              inputWidth: '100%',
              changeEvent: (v) => {

              },
              field: 'wholesalePrice',
              placeholder: "¥¥"
            },
            {
              text: '零售价：',
              type: 'inputnumber',
              changeEvent: (v) => {

              },
              width: '70px',
              inputWidth: '100%',
              field: 'retailPrice',
              value: undefined,
              placeholder: "¥¥"
            },
          ]
        ],
        form3: [
          [
            {
              type: 'product-table',
              text: '库存设置：',
              data: [],
              rowWidth: '100%',
              field: 'productInitialInventory',
              productCommonList: [
                {
                  type: 'warehouse2',
                  showText: false,
                  text: '仓库：',
                  placeholder: '请选择仓库信息',
                  selectWidth: '140px',
                  multiple: false,
                  changeEvent: (v) => {
                    console.log(v);
                  },
                  value: '',
                },
                {
                  type: 'button',
                  buttonIcon: 'el-icon-plus',
                  buttonText: '插入行',
                  buttonType: 'success',
                  event: () => this.addRow(),
                },
              ],
              header: [
                {
                  prop: "warehouseName",
                  label: "所属仓库"
                },
                {
                  prop: "initialInventory",
                  label: "期初库存数量"
                },
                {
                  prop: "initialPrice",
                  label: "期初成本价"
                },
                {
                  prop: "initialTotalPrice",
                  label: "期初总金额"
                },
                {
                  prop: "operate",
                  label: "操作"
                },
              ],
              del: (index, row, tableData) => {
                console.log(index, row);
                let data = [];
                for (let i = 0; i < tableData.length; i++) {
                  if (tableData[i]._id !== row._id) {
                    data.push(tableData[i]);
                  }
                }
                this.dialog.form3[0][0].data = data;
              }
            }
          ],
        ],
        copyForm3: [
          [
            {
              type: 'product-table',
              text: '库存设置：',
              data: [],
              rowWidth: '100%',
              field: 'productInitialInventory',
              productCommonList: [
                {
                  type: 'warehouse2',
                  showText: false,
                  text: '仓库：',
                  placeholder: '请选择仓库信息',
                  selectWidth: '140px',
                  multiple: false,
                  changeEvent: (v) => {
                    console.log(v);
                  },
                  value: '',
                },
                {
                  type: 'button',
                  buttonIcon: 'el-icon-plus',
                  buttonText: '插入行',
                  buttonType: 'success',
                  event: () => this.addRow(),
                },
              ],
              header: [
                {
                  prop: "warehouseName",
                  label: "所属仓库"
                },
                {
                  prop: "initialInventory",
                  label: "期初库存数量"
                },
                {
                  prop: "initialPrice",
                  label: "期初成本价"
                },
                {
                  prop: "initialTotalPrice",
                  label: "期初总金额"
                },
                {
                  prop: "operate",
                  label: "操作"
                },
              ],
              del: (index, row, tableData) => {
                console.log(index, row);
                let data = [];
                for (let i = 0; i < tableData.length; i++) {
                  if (tableData[i]._id !== row._id) {
                    data.push(tableData[i]);
                  }
                }
                this.dialog.form3[0][0].data = data;
              }
            }
          ],
        ],
        form4: [
          [
            {
              text: '商品图片：',
              type: 'uploadPic',
              rowWidth: '100%',
              field: 'productPic',
              value: [],
              dialogVisible: false,
              dialogImageUrl: '',
              uploadWidth: "1000px",
            },
          ],
        ],
        copyForm4: [
          [
            {
              text: '商品图片：',
              type: 'uploadPic',
              rowWidth: '100%',
              field: 'productPic',
              value: [],
              dialogVisible: false,
              dialogImageUrl: '',
              uploadWidth: "1000px",
            },
          ],
        ],
        chooseItem: null,
      },
      page: {
        pageSize: 10,
        pageNumber: 1,
        total: 0,
      }
    }
  },
  activated() {
    this.initProductInventory();
  },
  watch: {
    editDialog() {
      if (this.editDialog) {
        this.getUnitList(); // 单位
      }
    },
  },
  mounted() {
    this.initProductInventory();
  },
  methods: {
    getProductList() {
      if (this.table.loading)
        return;
      this.table.loading = true;
      getProductList({
        userID: getUserInfo().userID,
        pageSize: this.page.pageSize,
        pageNumber: this.page.pageNumber,
        productName: this.list[0].value,
        productNumber: this.list[1].value,
        productCategoryID: this.treeCurrentNodeKey
      }).then(res => {
        console.log(res);
        this.table.data = res.data.data;
        this.page.total = res.data.page.totalDocuments;
        this.table.loading = false;
      });
    },
    pageChangeEvent() {
      this.getProductList();
    },
    initProductInventory() {
      getWarehouseList({
        userID: getUserInfo().userID,
      }).then(res => {
        console.log(res, 590);
        let data = res.data.data;
        this.dialog.form3[0][0].data = [];
        this.dialog.copyForm3[0][0].data = [];
        for (let i = 0; i < data.length; i++) {
          this.dialog.form3[0][0].data.push({
            _id: data[i]._id,
            warehouseName: data[i].warehouseName,
            initialInventory: '',
            warehouseID: data[i]._id,
            initialPrice: '',
            initialTotalPrice: '',
          });
          this.dialog.copyForm3[0][0].data.push({
            _id: data[i]._id,
            warehouseID: data[i]._id,
            warehouseName: data[i].warehouseName,
            initialInventory: '',
            initialPrice: '',
            initialTotalPrice: '',
          });
        }
      });
    },
    addRow() {
      if (this.dialog.form3[0][0].productCommonList[0].value === '') {
        this.$message.error("请先选择左侧的仓库");
        return;
      }
      let {data} = this.dialog.form3[0][0];
      for (let i = 0; i < data.length; i++) {
        if (this.dialog.form3[0][0].productCommonList[0].value._id === data[i]._id) {
          this.$message.error(data[i].warehouseName + " 已存在于表格内，请添加其他仓库设置库存");
          return;
        }
      }
      data.push(this.dialog.form3[0][0].productCommonList[0].value);
    },
    reloadTree() {
      this.$refs.treeExpansionRef.getProductCategory();
    },
    getUnitList() {
      getUnitList({
        userID: getUserInfo().userID,
      }).then(res => {
        console.log(this.dialog.form[2][0]);
        let data = res.data.data;
        let arr = [];
        for (let i = 0; i < data.length; i++) {
          arr.push({
            label: data[i].unit,
            value: data[i].unit,
          });
        }
        this.dialog.form[2][0].options = arr;
        this.dialog.copyForm[2][0].options = arr;
      });
    },
    statusChange(v) {
      console.log(v);
      this.expansionStatus = v;
      this.$refs.tableRef.doLayout();
    },
    getCurrentNodeKey(v) {
      console.log(v);
      this.treeCurrentNodeKey = v;
      this.getProductList();
    },
    edit(item) {
      let setData = () => {
        for (const inputSet of this.dialog.form) {
          for (const inputItem of inputSet) {
            if (inputItem['field'] === 'productPic') {
              let list = item[inputItem['field']];
              let arr = [];
              for (let i = 0; i < list.length; i++) {
                arr.push({
                  name: list[i].name,
                  url: '/api/' + list[i].name,
                });
              }
              console.log(arr);
              inputItem['value'] = arr;
            } else if (inputItem['field'] === 'productInitialInventory') {
              console.log(item, inputItem, 695);
              inputItem['data'] = item[inputItem['field']];
            } else {
              if (inputItem['field'] === 'productCategory') {
                inputItem['node'] = item[inputItem['field'] + 'Label'];
              }


              inputItem['value'] = item[inputItem['field']];
            }
          }
        }
      }

      setData();
      this.dialog.chooseItem = item;
      this.editDialog = true;
    },
    del(item) {
      this.$confirm('您确认要删除该供应商吗?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        console.log(item);
        deleteProductByProductID({
          _id: item._id
        }).then(res => {
          this.$message.success("操作成功");
          this.getProductList();
        });
      }).catch(() => {

      });
    },
    changeevent(selection, row) {
      console.log(selection, row);

    },
    cancel(reload = true) {
      this.editDialog = false;
      if (reload) {
        this.reloadTree();
      }
      this.dialog.form = deepClone(this.dialog.copyForm);
      this.dialog.form2 = deepClone(this.dialog.copyForm2);
      this.dialog.form3 = deepClone(this.dialog.copyForm3);
      this.dialog.form4 = deepClone(this.dialog.copyForm4);
    },
    submit() {
      function isNotANumberOrEmpty(value) {
        // 先检查是否为空
        if (value === "" || value === null || value === undefined) {
          return true;
        }

        // 使用isNaN来判断是否不是数字
        return isNaN(value);
      }

      function isValidInventory(initialInventory, initialPrice, initialTotalPrice) {
        // 判断是否都是空字符串
        if (isNotANumberOrEmpty(initialInventory) && isNotANumberOrEmpty(initialPrice) && isNotANumberOrEmpty(initialTotalPrice)) {
          return '';
        } else {
          if (!isNotANumberOrEmpty(initialInventory) && !isNotANumberOrEmpty(initialPrice) && !isNotANumberOrEmpty(initialTotalPrice)) {
            return "";
          }
          if (!isNotANumberOrEmpty(initialInventory !== "") && (isNotANumberOrEmpty(initialPrice === "") || isNotANumberOrEmpty(initialTotalPrice))) {
            if (initialPrice === '') {
              return "期初成本价";
            } else {
              return "期初总金额";
            }
          }

          if ((isNotANumberOrEmpty(initialInventory === "") || isNotANumberOrEmpty(initialPrice === "")) && !isNotANumberOrEmpty(initialTotalPrice)) {
            if (initialPrice === '') {
              return "期初总金额";
            } else {
              return "期初总金额";
            }
          }

          if ((isNotANumberOrEmpty(initialInventory) || isNotANumberOrEmpty(initialTotalPrice)) && !isNotANumberOrEmpty(initialPrice)) {
            if (initialTotalPrice === '') {
              return "期初成本价";
            } else {
              return "期初库存数量";
            }
          }

          return '内部错误';
        }
      }

      let data = this.$refs.commondialogformref1.requiredEmpty();
      if (data) {
        this.$message.error(data.requiredMessage);
        return;
      }

      data = {};
      data = Object.assign(data, this.$refs.commondialogformref1.getData());
      data = Object.assign(data, this.$refs.commondialogformref2.getData());
      data = Object.assign(data, this.$refs.commondialogformref3.getData());
      data = Object.assign(data, this.$refs.commondialogformref4.getData());
      data['isDisabled'] = false;
      console.log(data);

      // 检查库存设置是否设置正确
      let inventoryData = this.dialog.form3[0][0].data;
      let inventory = 0;
      for (let i = 0; i < inventoryData.length; i++) {
        let id = inventoryData[i];
        let value = isValidInventory(id.initialInventory, id.initialPrice, id.initialTotalPrice);
        console.log(value);
        if (value !== '') {
          this.$message.error(`[${id.warehouseName}]: 缺少${value}`);
          return;
        }
        inventory += parseInt(id.initialInventory || 0);
      }
      console.log(inventoryData);
      data['inventory'] = inventory;

      // 提交data
      data["userID"] = getUserInfo().userID;
      if (this.dialog.chooseItem) {
        data['_id'] = this.dialog.chooseItem['_id'];
      }
      addProduct(data).then(res => {
        if (res.data.code === -1) {
          this.$message.error(res.data.errMsg);
          return;
        }
        this.dialog.form = deepClone(this.dialog.copyForm);
        this.getProductList();
        this.reloadTree();
        this.editDialog = false;
        this.$message.success("操作成功");
      });
    }
  }
}
</script>


<style lang="scss">
.dashboard {
  &-container {
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(45, 51, 65, 0.08);
    border-radius: 10px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-inner {
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 10px 0;
  color: #2f3745;
}


.el-scrollbar__view {
  height: 100%;
}

.el-scrollbar__wrap {
  overflow: scroll;
}

.box-card .el-card__body {
  height: 100%;
}

.left-content {
  line-height: 16px;
  flex-wrap: wrap;
  border-radius: 10px;
  display: flex;
  padding-top: 10px;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}


.right-content {
  line-height: 16px;
  flex-wrap: wrap;
  width: calc(100% - 260px);
  border-radius: 10px;
  display: flex;
  padding-top: 10px;
  margin-top: 10px;
  margin-left: 10px;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}

.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
</style>
